<script setup lang="ts">
import { useMemberStore, usePhoneStore } from '@/stores'
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getActivityClientApi, getInvitationApi } from '@/services/my'
import { SwitchingTime } from '@/utils/tools'

const memberStore = useMemberStore()
const phoneStore = usePhoneStore()

/** 点击返回按钮 */
const onBack = () => {
  uni.navigateBack()
}

const pageData = ref({
  marketingId: '',
  backgroundImg: '',
  buttonName: '',
  activityRule: '',
  type: '',
  status: '',
  shareTitle: '',
  shareImg: '',
})

const list = ref<any>([])
const successList = ref<any>([])
/** 获取邀请有礼配置信息 */
const getInvitation = async () => {
  const res = await getInvitationApi()
  pageData.value = res.data
  console.log('获取邀请有礼配置信息', res.data)
  const shareParams = {
    path: `/pagesMy/newcomerWelfare/newcomerWelfare?invitationClientId=${memberStore.userInfo?.id}&marketingId=${pageData.value.marketingId}`,
    title: pageData.value.shareTitle,
    imageUrl: pageData.value.shareImg,
  }
  setupOnShareAppMessage(shareParams)
}

/** 获取被邀请人列表 */
const getActivityClient = async () => {
  const res = await getActivityClientApi({ marketingId: pageData.value.marketingId })
  console.log('列表', res)
  list.value = res.data || []
  successList.value = res.data?.filter((item: any) => item.status !== 0)
}
// 弹出层方法
const popup = ref<{
  open: () => void
  close: () => void
}>()

// 调用小程序的分享，以及监听小程序分享
import useMiniShare from '@/hooks/useMiniShare'
const { isShareFriends, setupOnShareAppMessage, onShareAppMessage } = useMiniShare()

isShareFriends()
onShareAppMessage

onShow(() => {
  getInvitation().then(() => {
    getActivityClient()
  })
})
</script>

<template>
  <view class="InviteFriends">
    <view
      class="bgcImage"
      :style="{
        backgroundImage: `url(${pageData.backgroundImg})`,
      }"
    >
      <!-- 头部导航栏 -->
      <view
        class="headNavigationBar"
        :style="{ paddingTop: Number(phoneStore.phoneInfo?.top) + 5 + 'px' }"
      >
        <text class="iconfont icon-left" @tap="onBack()"></text>
        <text>邀请有礼</text>
      </view>
      <text
        class="rule iconfont icon_questionMark"
        @tap="popup?.open()"
        :style="{ top: Number(phoneStore.phoneInfo?.bottom) + 7 + 'px' }"
      >
        活动规则</text
      >
    </view>
    <view class="procedureBox">
      <view class="boxTitle">
        <image src="/static/images/InviteFriends/icon_1.png" mode="scaleToFill" />邀请流程<image
          src="/static/images/InviteFriends/icon_1.png"
          mode="scaleToFill"
        />
      </view>
      <view class="procedure">
        <!-- 邀请步骤 -->
        <view class="stepList">
          <view class="stepItem">
            <view class="setpImage">
              <image src="/static/images/InviteFriends/icon_4.png" mode="scaleToFill" />
            </view>
            <view class="stepText">
              <text class="stepTop">分享链接</text>
              <view class="stepBottom">给好友</view>
            </view>
          </view>
          <view class="stepIcon">
            <image src="/static/images/InviteFriends/arrow.png" mode="scaleToFill" />
          </view>
          <view class="stepItem">
            <view class="setpImage">
              <image src="/static/images/InviteFriends/icon_3.png" mode="scaleToFill" />
            </view>
            <view class="stepText">
              <text class="stepTop">好友注册</text>
              <view class="stepBottom">得新人礼包</view>
            </view>
          </view>
          <view class="stepIcon">
            <image src="/static/images/InviteFriends/arrow.png" mode="scaleToFill" />
          </view>
          <view class="stepItem">
            <view class="setpImage">
              <image src="/static/images/InviteFriends/icon_2.png" mode="scaleToFill" />
            </view>
            <view class="stepText">
              <text class="stepTop">好友下单</text>
              <view class="stepBottom">订单完成</view>
            </view>
          </view>
          <view class="stepIcon">
            <image src="/static/images/InviteFriends/arrow.png" mode="scaleToFill" />
          </view>
          <view class="stepItem">
            <view class="setpImage">
              <image src="/static/images/InviteFriends/icon_2.png" mode="scaleToFill" />
            </view>
            <view class="stepText">
              <text class="stepTop">邀请达成</text>
              <view class="stepBottom">获得奖励</view>
            </view>
          </view>
        </view>
        <!-- 邀请按钮 -->
        <button class="procedureButton icon-weixin" hover-class="view-hover" open-type="share">
          &nbsp;{{ pageData.buttonName || '邀请微信好友' }}
        </button>
      </view>
    </view>
    <!-- 我的邀请 -->
    <view class="myInvite">
      <view class="boxTitle">
        <image src="/static/images/InviteFriends/icon_1.png" mode="scaleToFill" />邀请流程<image
          src="/static/images/InviteFriends/icon_1.png"
          mode="scaleToFill"
        /> </view
      ><view class="myInviteInfo">
        <view class="item"
          ><text class="num">{{ successList?.length || 0 }}</text
          ><text>已成功邀请/人</text></view
        >
        <view class="item"><text class="num">0.00</text><text>已获得奖励/元</text></view>
      </view></view
    >

    <!-- 邀请记录 -->
    <view class="inviteRecord">
      <view class="boxTitle">
        <image src="/static/images/InviteFriends/icon_1.png" mode="scaleToFill" />邀请流程<image
          src="/static/images/InviteFriends/icon_1.png"
          mode="scaleToFill"
        /> </view
      ><view class="inviteRecordInfo">
        <view v-if="list.length">
          <view class="historyItem" v-for="(item, index) in list" :key="index">
            <view class="invitee">
              <text class="inviteeName">{{ item.nickName }}</text>
              <view class="_time">{{ SwitchingTime(item.createTime, '!s') }} </view>
            </view>
            <view class="_status" v-if="item.status === 1"> 受邀成功</view>
            <view class="status_2" v-else-if="item.status === 2">来晚啦，奖励被领完了哦~</view>
            <view class="button_share" v-else>
              <button open-type="share" hover-class="view-hover" class="_share">提醒Ta使用</button>
            </view>
          </view>
        </view>
        <view v-else class="noData"> 奖励正在路上，加油哦！ </view>
      </view></view
    >

    <!-- 邀请记录 -->
    <view class="myHistory">
      <view class="historyText">
        <view
          >成功邀请
          <text style="color: #ffb326">{{ successList?.length || 0 }}</text>
          人
        </view>
        <navigator
          hover-class="none"
          :url="`/pagesEat/rankingsPage/rankingsPage?marketingId=${pageData.marketingId}`"
          class="rankings"
          >排行榜
          <view class="iconfont icon-right"></view>
        </navigator>
      </view>
      <view v-if="list.length">
        <view class="historyItem" v-for="(item, index) in list" :key="index">
          <view class="invitee">
            <text class="inviteeName">{{ item.nickName }}</text>
            <view class="_time">{{ SwitchingTime(item.createTime, '!s') }} </view>
          </view>
          <view class="_status" v-if="item.status === 1"> 受邀成功</view>
          <view class="status_2" v-else-if="item.status === 2">来晚啦，奖励被领完了哦~</view>
          <view class="button_share" v-else>
            <button open-type="share" hover-class="view-hover" class="_share">提醒Ta使用</button>
          </view>
        </view>
      </view>
      <view v-else class="noData"> 奖励正在路上，加油哦！ </view>
    </view>
    <!-- 弹出层 -->
    <uni-popup ref="popup" :safe-area="false" type="bottom">
      <view class="popupModule">
        <view class="ruletitle">邀请好友规则</view>
        <view class="ruleText" v-html="pageData?.activityRule"> </view>
        <button @tap="popup?.close()">知道了</button>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss">
.InviteFriends {
  min-height: 100vh;
  background-color: #feba30;
}
.headNavigationBar {
  position: absolute;
  top: 0;
  z-index: 999;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  .iconfont {
    position: absolute;
    left: 24rpx;
    bottom: 0;
    width: 100rpx;
    font-size: 40rpx;
    padding-left: 14rpx;
  }
}
.bgcImage {
  width: 100%;
  height: 600rpx;

  background-size: cover; /* 设置背景图大小适应容器 */
  background-position: center; /* 设置背景图位置居中 */
  .rule {
    position: absolute;
    right: 24rpx;
    font-size: 22rpx;
    color: #000000e5;
  }
}
.procedureBox {
  width: 680rpx;
  position: relative;
  background-color: #fff;
  margin: 0 35rpx;
  border: 4rpx solid #000;
  .procedure {
    display: flex;
    align-items: center;
    flex-direction: column;

    .procedureButton {
      margin: 60rpx 0 60rpx 0;
      width: 600rpx;
      height: 96rpx;
      line-height: 96rpx;
      color: #000;
      background-color: $uni-color-motif;
      font-size: 36rpx;
      border-radius: 200rpx;
    }
    .procedureText {
      font-size: 22rpx;
      color: #00000080;
    }
    .stepList {
      margin-top: 50rpx;
      display: flex;
      width: 100%;
      padding: 0 50rpx;
      justify-content: space-between;
      .stepItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        .setpImage {
          image {
            width: 60rpx;
            height: 60rpx;
            margin-bottom: 40rpx;
          }
        }
        .stepText {
          margin-top: 14rpx;
          text-align: center;
          font-size: 24rpx;
          .stepTop {
            color: #bbb;
          }
          .stepBottom {
            margin-top: 4rpx;
            color: #000000;
          }
        }
      }
      .stepIcon {
        margin-top: 10rpx;
        image {
          width: 30rpx;
          height: 20rpx;
        }
      }
    }
  }
}
.myInvite,
.inviteRecord {
  width: 680rpx;
  position: relative;
  background-color: #fff;
  margin: 20rpx 35rpx;
  border: 4rpx solid #000;
  .myInviteInfo {
    display: flex;
    justify-content: space-between;
    padding: 50rpx 0;
    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #bbb;
      font-size: 30rpx;
      .num {
        color: #ffa407;
        font-size: 60rpx;
      }
    }
  }
  .inviteRecordInfo {
    .noData {
      text-align: center;
      color: #bbb;
      font-size: 30rpx;
      padding: 50rpx;
    }
  }
}
.mat {
  height: 360rpx;
  width: 100%;
}
.myAchievements {
  margin: 20rpx 24rpx;
  width: 702rpx;
  height: 308rpx;
  border-radius: 16rpx;
  font-size: 28rpx;
  background-color: #fff;
  .myAchievementsText {
    padding: 14rpx 0 14rpx 32rpx;
    width: 100%;
    height: 68rpx;
    color: #000000e5;
    background-color: #f1fded;
    font-size: 28rpx;
  }
  .myAchievementsBox {
    display: flex;
    justify-content: space-around;
    padding: 38rpx;
    .myAchievementsBoxLeft,
    .myAchievementsBoxRight {
      display: flex;
      flex-direction: column;
      align-items: center;
      .boxLeftText,
      .boxRightText {
        margin-bottom: 16rpx;
      }
      .boxLeftData,
      .boxRightData {
        font-size: 34rpx;
        color: #ea5260;
      }
      .boxLeftData > text,
      .boxRightData > text {
        font-size: 64rpx;
        margin-right: 4rpx;
      }
    }
  }
}
.myHistory {
  margin: 20rpx 24rpx;
  width: 702rpx;
  border-radius: 16rpx;
  background-color: #fff;
  .historyText {
    border-radius: 16rpx 16rpx 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28rpx 0 40rpx;
    height: 92rpx;
    background-color: #f1fded;
    font-size: 28rpx;
    color: #000000e5;
    .rankings {
      display: flex;
      align-items: center;
      height: 50rpx;
      min-width: 20rpx;
      font-size: 28rpx;
      color: #8adf4b;
      .icon-right {
        margin-left: 6rpx;
        font-size: 30rpx;
      }
    }
  }
  .historyItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx;
    margin-bottom: 16rpx;
    .invitee {
      display: flex;
      flex-direction: column;
      font-size: 22rpx;
      color: #00000080;
      .inviteeName {
        font-size: 26rpx;
        color: #000000e5;
      }
    }
    ._status {
      font-size: 24rpx;
      color: $uni-color-motif;
    }
    .status_2 {
      font-size: 24rpx;
      color: #808080;
    }
    .button_share {
      ._share {
        min-width: 174rpx;
        height: 42rpx;
        line-height: 42rpx;
        font-size: 24rpx;
        color: #fff;
        background-color: $uni-color-motif;
        border-radius: 64rpx;
      }
    }
  }
  .noData {
    width: 100%;
    min-height: 500rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #00000080;
    font-size: 28rpx;
  }
}
.popupModule {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  font-size: 26rpx;
  color: #000000e5;
  border-radius: 16px 16px 0px 0px;
  padding-bottom: 80rpx;
  .ruletitle {
    font-size: 34rpx;
    margin: 40rpx 0 24rpx 0;
  }
  .ruleText {
    display: flex;
    flex-direction: column;
    margin: 0 36rpx 40rpx 36rpx;
  }
  button {
    margin: 0 56rpx;
    width: 638rpx;
    height: 84rpx;
    line-height: 84rpx;
    border-radius: 44rpx;
    font-size: 26rpx;
    color: #fff;
    background-color: $uni-color-motif;
  }
}
.boxTitle {
  background: #ffdc17;
  border-bottom: 4rpx solid #000;
  line-height: 90rpx;
  text-align: center;
  font-size: 32rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  image {
    width: 30rpx;
    height: 36rpx;
    margin: 0 20rpx;
  }
}
</style>
